iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
Mobile Development

「Google Flutter」學習筆記系列 第 5

【Day 5】flutter_layout_article - 即使是初學者也必須知道的高級佈局規則

  • 分享至 

  • xImage
  •  

今日要點
》前言
》介紹 flutter_layout_article 專案
》下載並編譯 flutter_layout_article 專案


前言

好,前面開發環境建立起來,也建立出第一個專案 Hello World 後,開始很心動K手冊,看程式碼,動手寫程式了嗎?這是很正常的想法,但這會面對二大挫折點:

  1. 我會花很多時間,了解很多語法,然後寫出一個普普的介面,然後覺得Flutter好像也不怎麼樣,就不想學了。就像我的 Demo App.(哭,美術說他也沒空幫我拉版面 T_T
  2. 我花半天寫的程式,可能已經有人寫好了,而且很厲害到無邊了。然後我會很心痛那些逝去的時光。

所以我改變學習的方向,在了解初步的概念後,從 Run Run 高手的程式開始吧~ 先看看很厲害的高手能做出什麼作品出來。雖然現在的程式功力,可能看不懂這些程式碼。但我能 build 的起來,能放到我手機裡看看,不是很酷嗎,然後心想,哇,原來可以寫成這樣,就有動力學下去了!! 熱情是所有學習的動力來源阿~

那麼!高手的 code 都在那裡,當然是在 Github 阿,所以接下來我們都會在 Github 中尋寶...

介紹 flutter_layout_article 專案

好吧,我本來想直接就開始介紹美美的專案,BUT!在我下載專案練習的過程中,三不五時就出現施工封鎖條的圖形。我說 Flutter 阿!你一定要這麼明顯的指出長寬的佈局有那裡錯了嗎 XD

為了避免下載了專案來研究,但執行起來到處出現施工圖,然後也不知道發生什麼事的囧境,所以第一個專案,我先來介紹這個非常厲害的專案,由 Marcelo Glasberg 撰寫的佈局教學 Flutter: The Advanced Layout Rule Even Beginners Must Know,這篇文章有5.7K claps,還被收錄到官方網站 Understanding constraints真就有點強大,想信大家讀了都受益非淺,請務必移步去看看 :)

還有網友的中文翻譯,最下面的參考有引用的連結。
Flutter 的佈局方式與 HTML 的佈局差異相當大,最好熟記這些規則:

首先,上層 widget 向下層 widget 傳遞約束條件。
約束條件僅是4個集合:最小寬度 最大寬度,最小高度 最大高度。所以下層從其上層獲得自己的約束。

然後,下層 widget 向上層 widget 傳遞大小信息。
上層會向下層詢問每個下層要設置的大小。

最後,上層 widget 決定下層 widget 的位置。
上層將其下層(在x軸水平,在y軸垂直)定位。

最重要的就是這三點,更詳細的說明,請閱讀文章的內容,我覺得寫的非常好,真的是很用心有誠意的指導老師。

下載並編譯 flutter_layout_article 專案

那麼我們就開始下載並且建立這個 flutter_layout_article 專案囉。

% git clone https://github.com/marcglasberg/flutter_layout_article.git

Cloning into 'flutter_layout_article'...
remote: Enumerating objects: 177, done.
remote: Counting objects: 100% (177/177), done.
remote: Compressing objects: 100% (112/112), done.
remote: Total 177 (delta 55), reused 152 (delta 40), pack-reused 0
Receiving objects: 100% (177/177), 190.26 KiB | 503.00 KiB/s, done.
Resolving deltas: 100% (55/55), done.


% cd flutter_layout_article 
% flutter pub get

Running "flutter pub get" in flutter_layout_article... 1.1s


好,程式碼都準備好了,那就開始 build 啦,先把模擬器都開起來。
我開了二個 Android 模擬器,二個 iOS 模擬器。

可以用這個指令看看裝置的細節

% flutter devices

然後開始編譯,並且安裝到所有的裝置並且執行。

% flutter run -d all

我的執行過程

沒意外的話,就會看到所有的裝置都有畫面了。

這個專案的介面很方便,分為三個部份:

  1. 上面是佈局的呈現畫面
  2. 中間是佈局的編號,你點了某點編號,就會切到那個佈局的介面
  3. 下面佈局的說明

範例第14, 跟第24就是會出現施工封鎖條圖形的範例啦,大家可以仔細看看教學的說明。

以上先介紹到這邊啦,有留言的話,再找時間補充。哈
周末真是備稿與存稿的好時光丫,今日完全沒行程,好好的跟鐵人賽奮鬥!

好,第5天,寫完。

參考


上一篇
【Day 4】Flutter MaterialApp UI 架構
下一篇
【Day 6】Best-Flutter-UI-Templates - 超霸氣的自由宣言專案
系列文
「Google Flutter」學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言